<template>
  <div>
    <el-dialog
      v-model="dialog"
      title="修改密码"
      width="20%"
      style="width: 500px;height: 380px;
      background: linear-gradient(55deg, rgba(0, 0, 0, 0.17) 27.7%, rgba(7, 146, 132, 0.12) 83.18%), rgba(68, 68, 68, 0.60);
      box-shadow: 0px 0px 10px 1px rgba(148, 148, 148, 0.15) inset;
      backdrop-filter: blur(10px);
      border-radius: 10px;"
      @close="reset"
      :showClose="isChange !== '0'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="editPassword">
        <el-form ref="formRef" label-position="top"  label-width="100px">
          <el-form-item label="旧密码" prop="password">
            <el-input v-model="formPassword.oldPassword" type="password" show-password/>
          </el-form-item>

          <el-form-item label="新密码" prop="password">
            <el-input v-model="formPassword.newPassword" type="password" show-password/>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="formPassword.confirmPassword" type="password" show-password/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog = false" v-if="props.isChange !== '0'"
            >取消</el-button
          >
          <el-button type="primary" @click="confirmPassword"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
// import { updateUserPassWord } from "@/api/login.js";
// import useAccountInfoStore from "@/store/useAccountInfoStore.js";
const props = defineProps({
  passwordDialog: {
    default: false,
    type: Boolean,
  },
  isChange: {
    default: "1",
    type: String,
  },
});
const emit = defineEmits(["updatePasswordDialog"]);
const dialog = computed({
  get: () => props.passwordDialog,
  set: (value) => {
    emit("updatePasswordDialog", value);
  },
});

// const accountInfoStore = useAccountInfoStore();
const formPassword = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const reset = () => {
  Object.keys(formPassword).forEach((key) => {
    formPassword[key] = "";
  });
};
const router = useRouter();
const confirmPassword = () => {
  if (!formPassword.oldPassword) {
    ElMessage.warning("请输入旧密码");
    return;
  }
  if (!formPassword.newPassword) {
    ElMessage.warning("请输入新密码");
    return;
  }
  if (!formPassword.confirmPassword) {
    ElMessage.warning("请输入确认密码");
    return;
  }
  if (formPassword.newPassword !== formPassword.confirmPassword) {
    ElMessage.warning("密码输入不一致");
    return;
  }
  // updateUserPassWord({
  //   oldPassword: formPassword.oldPassword,
  //   password: formPassword.newPassword,
  //   userId: accountInfoStore.userId,
  // }).then((res) => {
  //   dialog.value = false;
  //   router.push("/login");
  //   ElMessage.success("修改成功");
  // });
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__title{
  color: #fff;
  font-size: 20px;
}
::v-deep .el-dialog__close{
  color: #fff;
  font-size: 20px;
}
::v-deep .el-form-item__label{
  color: #fff;
  font-size: 16px;
}

::v-deep .el-input__wrapper{
  background: rgba(0, 0, 0, 0.50);
  box-shadow: none;
}
::v-deep .el-input__inner{
  color: #fff;
}
</style>
